<script setup>
import {ref, watchEffect, inject} from "vue";
import {addAuthorityAPI} from "@/api/manager.js";
import { InfoFilled } from '@element-plus/icons-vue'
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";

const env = import.meta.env
const AUTHORITY_NAME_MAX_LEN = env.VITE_AUTHORITY_NAME_MAX_LEN
const AUTHORITY_CODE_MAX_LEN = env.VITE_AUTHORITY_CODE_MAX_LEN
const AUTHORITY_DESC_MAX_LEN = env.VITE_AUTHORITY_DESC_MAX_LEN

// 是否显示添加权限
const {addAuthorityVisible, searchByCondition} = inject('addAuthorityVisible')

// 输入数据
const name = ref('')
const code = ref('')
const disabled = ref(false)
const desc = ref('')

// 确认添加新权限
const confirmAdd = async () => {
  // 未输入
  if (name.value.length <= 0 || code.value.length <= 0 || desc.value.length <= 0) {
    elErrorMessageTip("请先完成信息的输入")
    return
  }
  const res = await addAuthorityAPI(name.value, code.value, disabled.value, desc.value)
  // 成功
  if (res) {
    // 重新查询权限列表
    await searchByCondition()
    name.value = ''
    code.value = ''
    disabled.value = false
    desc.value = ''
    addAuthorityVisible.value = false
  }
}
// 取消添加新权限
const cancelAdd = () => {}
</script>

<template>
  <div class="add-authority">
    <el-dialog v-model="addAuthorityVisible" title="新增权限">
      <el-form
          label-position="right"
          label-width="130px"
      >
        <el-form-item label="权限名称">
          <el-input
              v-model="name"
              placeholder="请输入权限名称"
              clearable
              :maxlength="AUTHORITY_NAME_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="权限编码">
          <el-input
              v-model="code"
              placeholder="请输入权限编码"
              clearable
              :maxlength="AUTHORITY_CODE_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="权限是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input
              autosize
              type="textarea"
              placeholder="请输入权限描述"
              clearable
              v-model="desc"
              :maxlength="AUTHORITY_DESC_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
      </el-form>
      <div class="flex justify-end items-center">
          <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否确认添加新权限？"
              @confirm="confirmAdd"
              @cancel="cancelAdd"
          >
            <template #reference>
              <el-button type="primary" plain>添加权限</el-button>
            </template>
          </el-popconfirm>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>